import React, { FC, useEffect, useRef } from 'react'
import MyAvatar from '../../../components/MyAvatar'
import Myhead from '../../../components/myhead'
import { Avatar, List, Space, Toast } from 'antd-mobile'
import { RightOutline ,UnorderedListOutline,ContentOutline,SetOutline,MailOutline,TextOutline} from 'antd-mobile-icons'
import { inject, observer } from 'mobx-react'
import './user.scss'
import { useNavigate } from 'react-router-dom'
const User:FC<any>=({
  uinfo
})=> {
  const {userInfo,changeInfo,changeInfoAsync}=uinfo
  const navigator=useNavigate()
  useEffect(()=>{
    changeInfoAsync()
  },[])
  //点击查看，携带——id进入详情页
  const navigate = useNavigate()
  const gotoDetailed=(item:any)=>{
    navigate('/detailed/userDetailed/'+item._id)
  }
   //点击意见箱，携带——id进入意见箱
   const gotoDetailedMyadvise=(item:any)=>{
     navigate('/myadvise/'+item._id)
   }
  return (
    <div style={{fontSize:"0.16rem"}} className='paddingtop ListOne'>
      <Myhead title='我'></Myhead>
      <List>
        <List.Item
          onClick={()=>gotoDetailed(userInfo)}
          prefix={
            <MyAvatar/>
        }
        >
         {userInfo&&userInfo.username}
          
        </List.Item>
      </List>
        <List style={{marginTop:'0.1rem'}}>
          <List.Item prefix={<UnorderedListOutline />} onClick={() => {navigate('/home/news')}}>
              课程 
          </List.Item>
        </List>
        <List style={{marginTop:'0.1rem'}}>
          <List.Item prefix={<MailOutline />} onClick={() =>gotoDetailedMyadvise(userInfo)}>
              意见箱
          </List.Item>
          <List.Item prefix={<TextOutline />}  onClick={() =>
              Toast.show({
                content: '暂时没有添加笔记'
              })
            }>
              笔记本
          </List.Item>
          <List.Item prefix={<ContentOutline />} onClick={() => {navigate('/home/main/bookList')}}>
              书架
          </List.Item>
        </List>
        <List style={{marginTop:'0.1rem'}}>
          <List.Item prefix={<SetOutline />} onClick={() => {navigator('/setting')}}>
              设置
          </List.Item>
        </List>
    </div>
  )
}

export default inject('uinfo')(observer(User))
